<template>
  <div>
    <van-nav-bar title="课程收藏"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="course-list">
      <div class="course-item"
           v-for="item in data.courseList"
           :key="item">
        <div class="img-box"><img :src="item.imgURL"></div>
        <div class="info-box">
          <van-dropdown-menu class="course-dropmenu">
            <van-dropdown-item v-model="item.isCollected"
                               :options="option1" />
          </van-dropdown-menu>
          <p class="info-title">{{item.title}}</p>
          <p class="info-detail">{{item.detail}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      value1: 1,
      courseList: []
    })
    const option1 = [
      { text: '收藏', value: 1 },
      { text: '取消收藏', value: 0 }
    ]
    function onClickLeft () {
      proxy.$router.push('/user')
    }
    async function mygetCourseList () {
      const that = this.data
      proxy.$axios.course.getCourseList().then(res => {
        if (res.status === 200) {
          that.courseList = res.data.data.list
        }
      })
    }
    return {
      data,
      option1,
      onClickLeft,
      mygetCourseList
    }
  },
  created () {
    this.mygetCourseList()
  },
  computed: {
    value1 () {
      this.updateCollectionStatus()
      return 0
    }
  },
  methods: {
    updateCollectionStatus () {
      this.$axios.login.login(this.data.user).then(res => {
        if (res.status === 200) {
          Toast.success('操作成功')
          window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/user')
        } else {
          const msg = res.data.message
          Toast.fail(msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.course-dropmenu {
  width: 1px;
  float: right;
  margin-right: $margin-horizon;
}
.course-list {
  margin: $margin-horizon;
  border-radius: $border-radius;
  background-color: #fff;
}
.course-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  .img-box {
    margin: 15px;
    width: 100px;
    height: 60px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    &-box {
      width: 200px;
      position: relative;
    }
    &-title {
      font-size: $fontsize-4;
    }
    &-detail {
      font-size: $fontsize-5;
      margin-top: -5px;
    }
    &-status {
      position: absolute;
      top: 18px;
      right: 20px;
      padding: 4px;
      font-size: $fontsize-5;
      background-color: $theme-color5;
      border-radius: $border-radius-2;
    }
  }
}
</style>
